import React, { Component } from 'react'
import menuModel from "../services/menu/Service";

export default class AddUser extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            list: [],
            path: "",
            msg: "",
            component:"",
        }

    }

    async componentDidMount() {
        let { data: list } = await menuModel.query({ type: 2 });//普通菜单
        this.setState({
            list
        })

    }
    add =async () => {//新增组件

        let {data} = await  menuModel.add({path:this.state.path,msg:this.state.msg,type:2,component:this.state.component});

        this.setState({
            list:[...this.state.list,data]
        })

    }

    render() {
        return (
            <div>AddMenu

                <div>
                    <div>路径 <input type="text" value={this.state.path} onChange={(e) => {
                        this.setState({
                            path: e.target.value
                        })
                    }} /></div>
                    <div>菜单名称 <input type="text" value={this.state.msg} onChange={(e) => {
                        this.setState({
                            msg: e.target.value
                        })
                    }} /></div>
                       <div>组件名称 <input type="text" value={this.state.component} onChange={(e) => {
                        this.setState({
                            component: e.target.value
                        })
                    }} /></div>
                    <button onClick={() => {
                        this.add();
                    }}>新增</button>
                </div>

                <div className='menu1'>
                    <div className='table'>
                        <div className='tr'>
                            <div className='td'>编号</div>
                            <div className='td'>路径</div>
                            <div className='td'>菜单</div>
                            <div className='td'>组件名称</div>
                            <div className='td'>操作</div>
                        </div>
                        {this.state.list.map((item: any, index: number) => {

                            return (<div className='tr' key={item.id}>
                                <div className='td'>{item.id}</div>
                                <div className='td'>{item.path}</div>
                                <div className='td'>{item.msg}</div>
                                <div className='td'>{item.component}</div>
                                <div className='td'>删除</div>
                            </div>)
                        })}

                    </div>
                </div>





            </div>
        )
    }
}
